<template>
  <div class="Box">
    <div class="title">
        <h3>轮播图管理</h3>
    </div>
    <div class="blackLine"></div>
    <div id="carouselUse">
        <el-button type="primary" plain @click="openForm()">添加图片</el-button>
    </div>
    <div id="carouselBox">
        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in img" :key="item">
              <i class="carouselDeleted el-icon-close" @click="deleteCarousel(item)"></i>
              <img style="object-fit: scale-down" :src="item" />
            </el-carousel-item>
        </el-carousel>
    </div>
    <el-dialog
        :show-close="false"
        :close-on-click-modal="false"
        title="添加轮播图"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="轮播图" prop="img">
                <el-upload
                    :on-success="handleAvatarSuccess"
                    :headers="headers"
                    class="avatar-uploader"
                    action="http://localhost:8888/hwy/cater/file/upload"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    >
                    <img v-if="form.img" :src="form.img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-tooltip class="item" effect="dark" content="值越大越早显现" placement="bottom">
                    <el-input-number placeholder="值越大越早显现" v-model="form.sort" controls-position="right" :min="0" :max="20"></el-input-number>
                </el-tooltip>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="closeForm()">取 消</el-button>
            <el-button type="primary" @click="addCarousel('form')">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
        return {
            img:[],
            centerDialogVisible: false,
            form:{
                img:'',
                sort: '',
            },
            rules:{
                img:[
                    { required: true, message: '请上传图片', trigger: "blur"}
                ],
                sort:[
                    { required: true, message: '值不能为空', trigger: "blur"}
                ]
            }
        }
    },
    methods: {
        //查询轮播图
        findCarousel(){
            this.$axios.get("http://localhost:8888/hwy/cater/carousel/findCarousel")
                .then((response) => {
                    console.log(response)
                    this.img = response.data.data;
                })
        },
        //关闭弹窗
        closeForm(){
            this.centerDialogVisible = false;
            this.clearForm();
        },
        //开启弹窗
        openForm(){
            this.centerDialogVisible = true;
        },
        //清空表单数据
        clearForm(){
            this.form.img = '';
            this.form.sort = '';
        },
        //添加新图片
        addCarousel(form){
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.$axios.post("http://localhost:8888/hwy/cater/carousel/addCarousel",this.form)
                        .then((response) => {
                            if (response.data.code === 1 ) {
                                this.$message({
                                    message: response.data.data,
                                    type: 'success',
                                });
                            }
                            this.closeForm();
                            this.findCarousel();
                        })
                } else {
                    this.$message({
                        message: '添加失败。',
                        type: 'error'
                    });
                    return false;
                }
            });
        },
        //图片回显
        handleAvatarSuccess(res, file) {
            this.form.img = res.data;
        },
        //删除图片
        deleteCarousel(img){
            this.$axios.post("http://localhost:8888/hwy/cater/carousel/deleteCarousel",{
                        "img":img,
                    })
                    .then((response) => {
                        if (response.data.code === 1 ) {
                            this.$message({
                                message: response.data.data,
                                type: 'success',
                            });
                        }
                        this.findCarousel();
                    })
        },
        //上传图片前的判断
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
    mounted() {
        this.findCarousel();
    },
    computed: {
        headers() {
            return {
                "Authorization": localStorage.getItem("token")
            }
        }
    },
}
</script>

<style>
@import '../../assets/css/setting/carousel.css';
</style>